<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .base1{
            color: red;
        }

        .base2{
            font-size: 30px;
        }
    </style>
</head>
<body>


<h1>js基础知识回顾</h1>

<div id="app" >
    hello javascript
</div>

<!--<button id="btn" onclick="changeStyle()">点击改变文本样式</button>-->
<button id="btn" >点击改变文本样式</button>
<button id="btn2" >隐藏文本</button>
<button id="btn3" >显示文本</button>



<script>
    <!--获取div中的内容-->

    /*
    *   1.获取节点对象  div
    *   获取节点对象的方式：
    *     getElementById()
    *     getElementsByClassName()
    *     getElementsByTagName()
    * */
    let div = document.getElementById("app");
    console.log(div)
    //   2.   获取数据
    let info = div.innerText
    console.log(info)
    // 设置新的值  无法识别html标签  只会将所有内容动作普通文本进行处理
    // div.innerText = "<b>HELLO JAVASCRIPT</b>"

    // 识别html标签
    div.innerHTML = "<b>HELLO JAVASCRIPT</b>"
    // 取值
    console.log(div.innerHTML)

    info = div.innerText
    console.log(info)


    // 操作css样式
    // div.style.color ="red"
    // div.style.fontSize = "30px"

    let changeStyle = function changeStyle() {
        div.className = "base1 base2"
    }
    //事件绑定
    let btn = document.getElementById("btn");
    // btn.onclick = changeStyle

    btn.onclick = function (){
        div.className = "base1 base2"
    }


    let btn2 = document.getElementById("btn2");
    btn2.onclick = function (){
        div.style.display = "none"
    }

    let btn3 = document.getElementById("btn3");
    btn3.onclick = function (){
        div.style.display = ""
    }


    let  students = [
        {
            id:1,
            name:"tom",
            age:20
        },
        {
            id:1,
            name:"tom",
            age:20
        },
        {
            id:1,
            name:"tom",
            age:20
        }
    ]
</script>

</body>
</html>